<template>
  <div class="main-a">
    <div class="top">
      <span class="iconfont icon-zuojiantou" style="margin-left:10px;" @click="goBack"></span>
      <em>最近播放</em>
      <span>清空</span>
    </div>
      <div class="tap">
      <van-tabs animated sticky>
        <van-tab title="歌曲">
          <Scroll ref="scroll" class="content">
            <div class="sing-item" v-for="(item,index) in songList">
            <div class="sing_top">
              <div class="sing-name">{{ item.song.name }}</div>
              <div class="or_singer" v-show="item.song.alia[0]!==''">{{ item.song.alia[0] }}</div>
            </div>
            <div class="sing_bottom">
              <span class="singer">{{ item.song.ar[0].name }}</span>
              <span style="margin:0 5px;">-</span>
              <span class="issue">{{ item.song.al.name }}</span>
            </div>
            <div class="iconfont icon"></div>
          </div>
          </Scroll>
        </van-tab>
        <van-tab title="直播">
          <div class="tap-item"></div>
        </van-tab>
        <van-tab title="视频">
          <div class="tap-item"></div>
        </van-tab>
        <van-tab title="声音">
          <div class="tap-item"></div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs} from "vant";
import { mapGetters, mapState } from "vuex";
import Scroll from '@/components/global/scroll'
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components:{
    Scroll,
  },
  created() {
    this.$bus.$emit('hideMenu',false)
  },
  beforeDestroy() {
    this.$bus.$emit('hideMenu',true)
  },
  mounted() {
    let id = this.$store.getters.getId||this.$store.getters.userInfo.account.id;
    this.$store.dispatch('getSongList',id)
  },
  computed:{
    ...mapGetters(['songList'])
  },
  methods: {
    goBack(){
      this.$router.go(-1)
    }
  },
}
</script>

<style lang="scss">
  .main-a{
    .top{
      width: 100%;
      display: flex;
      color: #333;
      line-height: 50px;
      position: fixed;
      top: 0;
      background: #fff;
      z-index: 2;
      span{
        width: 10%;
        font-size: 18px;
        color: #333;
        font-weight: bold;
      }
      em{
        width: 75%;
        font-size: 18px;
        font-weight: 600;
        font-style: inherit;
      }
    }
    .tap{
      padding-top: 50px;
      .sing-item{
        padding: 10px 10px;
        .sing_top{
          font-size: 16px;
          color: #000;
          display: flex;
          // font-weight: 600;
          .or_singer{
            margin-left: 10px;
            font-size: 14px;
            color: #999;
          }
        }
        .sing_bottom{
          margin-top: 5px;
          display: flex;
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
</style>